<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="author" content="">
<!-- Note there is no responsive meta tag here -->
<link rel="shortcut icon" href="../../docs-assets/ico/favicon.png">
<title>Ripple tool</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>

<body style="">

<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
	<div class="container">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
				<span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="#">Ripple tool</a>
		</div>
		<div class="navbar-collapse collapse">
			<ul class="nav navbar-nav">
				<li class="active"><a href="#">Home</a></li>
				<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">捐赠 <b class="caret"></b></a>
					<ul class="dropdown-menu">
						<li><a target="_blank" href="https://ripple.com/client/#/login?to=rpd3DKHkhbU2nFsvQXf2tZrzspvo73y8Fv&name=noday&label=捐赠给noday&amount=10%2FXRP&dt=10001&tab=send">10XRP</a></li>
						<li><a target="_blank" href="https://ripple.com/client/#/login?to=rpd3DKHkhbU2nFsvQXf2tZrzspvo73y8Fv&name=noday&label=捐赠给noday&amount=100%2FXRP&dt=10001&tab=send">100XRP</a></li>
						<li><a target="_blank" href="https://ripple.com/client/#/login?to=rpd3DKHkhbU2nFsvQXf2tZrzspvo73y8Fv&name=noday&label=捐赠给noday&amount=1000%2FXRP&dt=10001&tab=send">1000XRP</a></li>
						<li class="divider"></li>
						<li class="dropdown-header">我的钱包地址</li>
						<li><a href="#">rpd3DKHkhbU2nFsvQXf2tZrzspvo73y8Fv</a></li>
					</ul></li>
			</ul>
			<ul class="nav navbar-nav navbar-right">
				<li><a target="_blank" href="https://ripple.com">Ripple</a></li>
			</ul>
		</div>
		<!--/.nav-collapse -->
	</div>
</div>

<div class="container">

	<div class="page-header">
		<h6>.</h6>
		<h2>Ripple系统操作工具</h2>
		<p class="">包含“发送”、“挂单”、“事件监控”等功能，解决ripple.com刷新重登陆和频繁offline问题</p>
	</div>

	<div class="row">
		<div class="col-xs-7">
			<div class="panel panel-primary" style="height: 600px;">
				<div id="panel1" class="panel-body">
					<form class="form-horizontal" role="form">
						<h4>输入钱包地址和秘钥</h4>
						<div class="form-group">
							<label for="inputWallet" class="col-sm-2 control-label">钱包地址</label>
							<div class="col-sm-10">
								<input value="" type="text" class="form-control" id="inputWallet" placeholder="登陆ripple后在'接收'页面查看">
							</div>
						</div>
						<div class="form-group">
							<label for="inputSecretkey" class="col-sm-2 control-label">密钥</label>
							<div class="col-sm-10">
								<input value="" type="password" class="form-control" id="inputSecretkey" placeholder="登陆ripple后在'钱包'-'安全'-'显示我的密钥'处">
							</div>
						</div>
						<div class="form-group">
							<div class="col-sm-offset-2 col-sm-10">
								<button type="button" class="btn btn-success">进入</button>
							</div>
						</div>
						<span class="help-block"><span class="label label-danger">注</span>为保证密钥安全，本站不会记录你的密钥，也请勿使用浏览器保存表单功能保存秘钥。</span>
					</form>
				</div>
				<div id="panel2" class="panel-body" style="display: none;">
					<!-- Nav tabs -->
					<ul id="opTab" class="nav nav-tabs">
						<li class="active"><a href="#send" data-toggle="tab">发送</a></li>
						<li><a href="#trade" data-toggle="tab">挂单</a></li>
					</ul>

					<!-- Tab panes -->
					<div class="tab-content">
						<div class="tab-pane active" id="send">
							<br>
							<form class="form-horizontal" role="form">
								<div class="form-group">
									<label for="inputDestination" class="col-sm-2 control-label">接收方</label>
									<div class="col-sm-10">
										<input value="rpd3DKHkhbU2nFsvQXf2tZrzspvo73y8Fv" type="text" class="form-control" id="inputDestination" placeholder="接收方钱包地址">
									</div>
								</div>
								<div class="form-group">
									<label for="inputAmount" class="col-sm-2 control-label">对方收到</label>
									<div class="col-sm-5">
										<input type="text" class="form-control" id="inputAmount" placeholder="数量">
									</div>
									<div class="col-sm-5">
										<div class="input-group">
											<input type="text" class="form-control" id="inputCurrency" placeholder="选择或输入货币类型">
											<div class="input-group-btn">
												<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
													<span class="caret"></span>
												</button>
												<ul class="dropdown-menu pull-right">
													<li><a href="#send|CNY">CNY - Chinese Yuan</a></li>
													<li><a href="#send|XRP">XRP - Ripples</a></li>
													<li><a href="#send|USD">USD - US Dollar</a></li>
													<li><a href="#send|EUR">EUR - Euro</a></li>
													<li><a href="#send|BTC">BTC - Bitcoin</a></li>
													<li><a href="#send|LTC">LTC - Litecoin</a></li>
													<li class="divider"></li>
													<li><a href="#send|BC">BC - coin.baoliao.info</a></li>
												</ul>
											</div>
											<!-- /btn-group -->
										</div>
										<!-- /input-group -->
									</div>
								</div>
								<div class="form-group">
									<div class="col-sm-offset-2 col-sm-10">
										<button id="btnSend" type="button" class="btn btn-success">发送</button>
									</div>
								</div>
								<span class="help-block">发送会提交到ripple，请等待ripple的处理，可在右侧看到ripple的处理结果</span>
							</form>
						</div>
						<div class="tab-pane" id="trade">
							<span class="label">coming soon</span>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xs-5">
			<div class="panel panel-warning" style="height: 600px;">
				<div class="panel-heading">
					<h3 class="panel-title">消息</h3>
				</div>
				<div id="tipPanel" class="panel-body"></div>
			</div>
		</div>
	</div>

</div>
<!-- /container -->

<!-- Bootstrap core JavaScript ================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="http://lib.sinaapp.com/js/jquery/1.8.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.ba-hashchange.min.js"></script>
<script type="text/javascript">
var wallet = null;
var secretkey = null;
var ripplews = null;
var cmdMap = {};
$(function() {
	$("#inputWallet").val('rDv4ZKxfLe3xnVm28VpW4fSS6cseUcpTKJ');
	$("#inputSecretkey").val('------');
	createConnection();
	$("#panel1").find("button").click(function() {
		wallet = $("#inputWallet").val();//rp34
		secretkey = $("#inputSecretkey").val();//sh29
		if (wallet.length!=34 || secretkey.length!=29) {
			alert("钱包或密钥有问题");
		} else {
			$("#panel1").hide();
			$("#panel2").show();
		}
	});
	
	$("#btnSend").click(function() {
		$(this).attr({"disabled":"disabled"}).html('处理中');
		var destination = $("#inputDestination").val();
		var amount = $("#inputAmount").val();
		var currency = $("#inputCurrency").val();
		send(destination, currency, amount);
		addTip('发送以提交');
		$(this).removeAttr("disabled").html('发送');
	});
	
	$('#opTab a').click(function (e) {
	  e.preventDefault();
	  location.hash = e.target.hash;
	  //$(this).tab('show');
	});
	
	$(window).hashchange(function(){
		var hash = location.hash.split('|');
		if (hash[0]) {
			$('#opTab a[href="' + hash[0] + '"]').tab('show');
		}
		if (hash[1]) {
			$("#inputCurrency").val(hash[1]);
		}
	});
	$(window).hashchange();
});
function addTip(msg) {
	var temp = '<div class="alert alert-warning fade in">'+
        '<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>'+
        msg+
      '</div>';
	$("#tipPanel").append(temp);
}
function send(destination, currency, value) {
	var tx = {
			   "command" : "submit",
			   "id" : "a1",
			   "tx_json" : {
			      "TransactionType" : "Payment",
			      "Account" : wallet,
			      "Destination" : destination,
			      "Amount" :  createAmount(currency, value)
			   },
			   "secret" : secretkey
			};
	ripplews.send(JSON.stringify(tx));
}
function createAmount(currency, value) {
	if(currency == 'XRP') {
		return value * 1000000;
	} else {
		return { 
			        "currency" : currency,
			        "value" : value,
			        "issuer" : wallet
			     };
	}
}
function createConnection() {
	addTip("正在连接ripple");
	ripplews = new WebSocket('ws://s1.ripple.com:443');

	ripplews.onerror = function(event) {
		addTip(event.data);
	};

	ripplews.onopen = function(event) {
		addTip("已连接到ripple");
	};

	ripplews.onmessage = function(event) {
		addTip(event.data);
	};
}
</script>

</body>
</html>
